<template>
  <div class="btn-container">
    <template v-for="(btn, key) in btnWidgets" v-if="checkWebFilter(btn)">
      <a-input-search
        :key="key"
        class="w-lg"
        :style="{'float': btn.$config.pos || 'right'}"
        v-if="btn.$config.component === 'search'"
        v-model="filterText"
        placeholder="搜索"
        @search="search">
        <a-icon type="search" slot="prefix" style="color: black;font-size: 18px"/>
      </a-input-search>
      <label
        class="inline"
        :key="key"
        :class="btn.$config.class"
        v-else-if="btn.$config.component === 'label'">{{ btn.name }}</label>
      <a-select
        :allowClear="true"
        :key="key"
        :style="style(btn)"
        v-else-if="btn.$config.component === 'select'"
        style="width: 150px;"
        :placeholder="btn.name || '请选择'"
        :options="btn.$config.options"
        @change="handleSelect(btn, ...arguments)"
      >
      </a-select>
      <a-button
        v-else-if="btn.operate &&!['新建','刷新','取回','恢复','删除'].includes(btn.name) && !btnShow.includes(btn.name)"
        :class="btn.$config.class"
        :type="btn.$config.type"
        :style="style(btn)"
        :ref="btn.name"
        :key="key"
        :disabled="!enable"
        @click="handleClick(btn)">
        <dist-icon :iconName="btn.icon" class="m-r-xs"></dist-icon>
        {{ btn.name }}
      </a-button>

      <a-button
        :class="btn.$config.class"
        :disabled="!enable"
        :key="key"
        :ref="btn.name"
        :style="style(btn)"
        style="border-radius: 32px;width: 100px"
        :type="btn.$config.type"
        @click="handleClick(btn)"
        v-else-if="btn.operate &&['新建','刷新','取回','恢复','删除'].includes(btn.name) && !btnShow.includes(btn.name)"
      >
        <span v-if="btn.name ==='新建'" class="display-flex">
          <span style="font-weight: bold;font-size: 18px" class="m-r-xs m-t-n-xxs">+</span>
          {{ btn.name }}
        </span>
        <span v-else="">
          <dist-icon :iconName="btn.icon" style="font-weight: bold" class="m-r-xs m-t-n-xxs"></dist-icon>
          {{ btn.name }}
        </span>

      </a-button>

    </template>
    <!--进度条-->
    <div v-if="dialogVisible">
      <a-modal title="绘制红线正在启动中" :visible="dialogVisible" :footer="null" :mask="false">
        <a-progress status="active" :percent="timeNum" :strokeColor="processColor" />
      </a-modal>
    </div>
  </div>
</template>

<script>

import { message } from 'ant-design-vue'

export default {
  name: 'BtnWidgets',
  props: {
    table: Object,
    keyFilter: {
      type: String,
      default: 'filterText'
    },
    widgets: Array,
    enable: {
      type: Boolean,
      default: true
    },
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    },
    btnShow: {
      type: Array,
      default: () => []
    }
    // createStyle:{
    //   'border-radius': '32px',
    //   'width': '120px'
    // }
  },
  data () {
    return {
      dialogVisible: false,
      processColor: '#1bab7d',
      timeNum: 0,
      btnWidgets: [],
      searchBtn: {},
      filterText: '',
      clickEnable: true
    }
  },
  computed: {
    style () {
      return (btn) => {
        return Object.assign({ float: btn.$config.pos || 'right' }, btn.$config.style || {})
      }
    }
  },
  methods: {
    checkWebFilter (btn) {
      if (btn.useWebFilter && btn.webFilterScript) {
        // eslint-disable-next-line no-new-func
        const fun = new Function('btn', 'detail', 'userInfo', btn.webFilterScript)
        const a = fun(btn, this.detail, this.userInfo)
        return a
      }
      return true
    },
    handleClick (btn) {
      this.timeNum = 0
      if (btn.name === '绘制红线') {
        this.dialogVisible = true
        setTimeout(() => { // 15秒延迟关闭
          this.dialogVisible = false
        }, 15000)
        this.upload()
        if (this.clickEnable) {
          this.$emit('btn-click', btn)
          this.clickEnable = false
          setTimeout(() => {
            this.clickEnable = true
          }, 10000)
        } else {
          message.info('已点击，请勿重复点击')
        }
      } else {
        this.$emit('btn-click', btn)
      }
    },
    upload () { // 进度
      if (this.timeNum < 100) {
        setTimeout(() => {
          this.timeNum = this.timeNum + 1
          this.upload()
        }, 140)
      }
    },
    handleSelect (btn, value) {
      const { $config: { keyParams } } = btn
      if (keyParams && (value !== void 0)) {
        this.table && this.table.refresh({
          [keyParams]: value
        })
      }
      this.$emit('btn-select', { [keyParams]: value })
    },
    search () {
      this.$emit('query', this.filterText)
      if (this.table) {
        this.table.refresh({
          [this.keyFilter]: this.filterText
        })
      }
    },
    async setBtns () {
      this.btnWidgets = this.widgets.filter((o) => {
        if (o.componentType === 'BGSJ') {
          if (o.operate.startsWith('dbl')) {
            this.dblBtn = o
          }
        } else if (o.componentType === 'ZYJD') {
          this.treeBtn.push(o)
        } else {
          const config = {}
          if (o.desc) {
            Object.assign(config, JSON.parse(o.desc))
          }
          o.$config = config
          return o
        }
      })
    }
  },
  beforeMount () {
    this.setBtns()
  }
}
</script>

<style scoped lang="less">
.btn-container {
  margin-top: 0 !important;
  height: 32px;

  label {
    line-height: 32px;
  }
}

.ant-btn {
  margin-right: 8px;
  border: 1px solid #2BAEF2;
  color: #2BAEF2;
}

.ant-btn-primary {
  color: #ffffff;
}

.ant-btn-default.close {
  border: 1px solid #ea6d48;
  color: #ea6d48;
}

.btn-apply-hy {
  background: rgba(67, 140, 242, 0.10);
}

.icon-search {
  color: #B8C0CB;
}

/deep/ .ant-input-suffix {
  display: none;
}

/deep/ .ant-input {
  padding: 4px 4px 4px 38px !important;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0px 6px 58px rgba(196, 203, 214, 0.103611);
}
</style>
